<template>
    <div>
     <div class="testinfo">
        <div class="title3" v-if="showNumberTitle">
          <span class="tops">第 {{currentQuestionPage + 1}} 题 </span>
          <template v-if="isCommit">
            <span class="count">{{sumSource}} </span>
            <img class="mark" src="/static/image/mark.png"/>
          </template>

        </div>
        <div>
          <div style="float: left; text-align: left; line-height: 40px; width: 50%">
            <h3>{{currentQuestion.questionName}} ({{currentQuestion.mark}}分)</h3>
          </div>
          <div style="float: right;line-height: 40px; width: 50%">
            <el-button @click="openAnswerFlag = true" type="primary" style="position: relative;  left: 348px;" round>答题卡</el-button>
          </div>
        </div>
        <div class="testbox" v-html="currentQuestion.content"></div>
        <span @click="playVideo(currentQuestion.video_url)" class="play" v-show="isCommit"><i class="el-icon-video-play"></i> 视频点评 </span>

       <el-dialog
       title="答题卡"
       :visible.sync="openAnswerFlag"
       width="30%">
       <template v-for="(question, index) in questionInfoList">
         <el-button :key="++index" size="medium" @click="selectQuestion(index)" circle>{{index}}</el-button>
       </template>
     </el-dialog>

       <!-- 试题选项 -->
        <el-row class="test-opt" style="padding-left: 20px;margin-top: 15px">
          <!-- 单选题 -->
          <template v-if="currentQuestion.question_type === 3">
            <el-radio-group
              v-for="(item, index) in currentQuestion.options"
              :key="index"
              @change="getUserAnswer"
              v-model="currentQuestion.userInfoAnswer">
              <el-radio :label="item.value">{{item.option}}</el-radio>
            </el-radio-group>
          </template>

          <!-- 多选题 -->
          <template v-if="currentQuestion.question_type === 4">
            <el-checkbox-group
              @change="getMoreAnswer"
              v-for="(item, index) in currentQuestion.options"
              :key="index"
              v-model="currentQuestion.userInfoAnswer">
              <el-checkbox :label="item.value">{{item.option}}</el-checkbox>
            </el-checkbox-group>
          </template>

          <!-- 判断题 -->
          <template v-if="currentQuestion.question_type === 6">
            <el-radio v-model="currentQuestion.userInfoAnswer" @change="getUserAnswer" label="1">对</el-radio>
            <el-radio v-model="currentQuestion.userInfoAnswer" @change="getUserAnswer" label="0">错</el-radio>
          </template>
        </el-row>

       <el-row class="test-opt" v-if="isCommit" style="margin-top: 15px">
         <el-col :span="20">
           <div>
             <h3 class="el-icon-s-promotion" style="font-size: 20px; line-height:30px;color: #239676; float:left;font-weight: 500;">&nbsp;&nbsp;</h3>
             <h3 style="font-size: 20px;color: black;font-weight: 700;">你的答案</h3>
             <div style="padding-left: 30px; padding-top: 30px"
                  v-if="currentQuestion.question_type != 3 && currentQuestion.question_type != 4
                 && currentQuestion.question_type != 6">
               <template>
                 <ul class="el-upload-list el-upload-list--picture-card" style="display: inline-block">
                   <li v-for="(enclosure, index) in currentQuestion.enclosure" class="el-upload-list__item is-success">
                     <img :src="fileUrl + enclosure" alt="" class="el-upload-list__item-thumbnail">
                     <label class="el-upload-list__item-status-label">
                       <i class="el-icon-upload-success el-icon-check"></i>
                     </label>
                     <span class="el-upload-list__item-actions">
                   <span class="el-upload-list__item-preview"
                         @click="lookAnswerImg(fileUrl + enclosure)">
                         <i class="el-icon-zoom-in"></i>
                   </span>

                   <span  class="el-upload-list__item-delete"
                          @click="deleteAnswerImg(enclosure)">
                     <i class="el-icon-delete"></i>
                   </span>
               </span>
                   </li>
                   <el-dialog :visible.sync="dialogAnswerImgVisible">
                     <img width="100%" :src="dialogImageUrl" alt="">
                   </el-dialog>
                 </ul>
               </template>
             </div>

             <div style="margin-top: 10px;margin-left: 29px;" v-else-if="currentQuestion.question_type === 6">
               <template v-if="currentQuestion.userInfoAnswer === '1'">
                   对
               </template>
               <template v-else>
                 错
               </template>
             </div>

             <div style="margin-top: 10px;margin-left: 29px;" v-else>
               {{currentQuestion.userInfoAnswer | parserAnswer}}
             </div>
           </div>
         </el-col>
       </el-row>

       <!-- 试题答案及解析 -->
       <el-row class="test-opt" v-if="isCommit" style="margin-top: 15px">
         <el-col :span="20">
           <div>
             <h3 class="el-icon-star-off" style="font-size: 20px; line-height:30px;color: #239676; float:left;font-weight: 500;">&nbsp;&nbsp;</h3>
             <h3  style="font-size: 20px;color: black;font-weight: 700;">正确答案</h3>
             <template v-if="currentQuestion.question_type === 6">
               <div style="margin-top: 10px;margin-left: 29px;" v-if="currentQuestion.answer === '1'" class="answer-detail">对</div>
               <div style="margin-top: 10px;margin-left: 29px;" v-else class="answer-detail">错</div>
             </template>
             <template v-else>
               <div style="margin-top: 10px;margin-left: 29px;" v-html="currentQuestion.answer"></div>
             </template>
           </div>
         </el-col>
       </el-row>

       <el-row class="test-opt" v-if="isCommit" style="margin-top: 15px">
         <el-col :span="20">
           <div>
             <h3 class="el-icon-success" style="font-size: 20px; line-height:30px;color: #239676; float:left;font-weight: 500;">&nbsp;&nbsp;</h3>
             <h3  style="font-size: 20px;color: black;font-weight: 700;">得分</h3>
             <div style="margin-top: 10px;margin-left: 29px;" v-if="currentQuestion.correct_status !== 2">{{currentQuestion.source}}分</div>
             <div style="margin-top: 10px;margin-left: 29px;" v-else><el-tag type="danger">待评分</el-tag></div>
           </div>
         </el-col>
       </el-row>

       <el-row class="test-content" style="margin-top: 15px" v-if="isCommit">
         <el-col :span="20">
           <div>
             <h3 class="el-icon-s-opportunity" style="font-size: 20px; line-height:30px;color: #239676; float:left;font-weight: 500;" >&nbsp;&nbsp;</h3>
             <h3  style="font-size: 20px;color: black;font-weight: 700;">答案解析</h3>
             <div style="margin-top: 10px;margin-left: 29px;" v-html="currentQuestion.analysis"></div>
           </div>
         </el-col>
       </el-row>

       <el-row class="test-content" style="margin-top: 15px" v-if="isCommit && currentQuestion.comment">
         <el-col :span="20">
           <div>
             <h3 class="el-icon-bell" style="font-size: 20px; line-height:30px;color: #239676; float:left;font-weight: 500;" >&nbsp;&nbsp;</h3>
             <h3  style="font-size: 20px;color: black;font-weight: 700;">评语</h3>
             <div>{{currentQuestion.comment}}</div>
           </div>
         </el-col>
       </el-row>
      </div>

      <div class="btnbox">
        <el-button
           type="danger"
           @click="openWritingBoard"
           v-show="currentQuestion.question_type != 3 && currentQuestion.question_type != 4
           && currentQuestion.question_type != 6 && !isCommit" round>开始答题
        </el-button>

        <el-button
          type="warning"
          v-if="currentQuestionPage !== 0"
          round
          @click="lastQuestion">
          <i class="el-icon-arrow-left"></i>
           上一题
        </el-button>

        <el-button
          v-if="questionTotal > 1 && currentQuestionPage !== questionTotal - 1"
          type="warning"
          @click="nextQuestion"
          round>下一题 <i class="el-icon-arrow-right"></i></el-button>
      </div>

      <div v-if="!isCommit">
        <div v-if="currentQuestion.enclosure && currentQuestion.question_type != 3 && currentQuestion.question_type != 4 && currentQuestion.question_type != 6" style="width: 150px; margin-left: 30px;">
          <h3 class="el-icon-s-promotion" style="font-size: 20px; line-height:30px;color: #239676; float:left;font-weight: 500;">&nbsp;&nbsp;</h3>
          <h3  style="font-size: 20px;color: black;font-weight: 700;">你的答案</h3>
        </div>
        <div style="padding-left: 30px; padding-top: 30px" v-if="currentQuestion.question_type != 3 && currentQuestion.question_type != 4 && currentQuestion.question_type != 6">
          <template>
            <ul class="el-upload-list el-upload-list--picture-card" style="display: inline-block">
              <li v-for="(enclosure, index) in currentQuestion.enclosure" class="el-upload-list__item is-success">
                <img :src="fileUrl + enclosure" alt="" class="el-upload-list__item-thumbnail">
                <label class="el-upload-list__item-status-label">
                  <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <span class="el-upload-list__item-actions">
                   <span class="el-upload-list__item-preview"
                         @click="lookAnswerImg(fileUrl + enclosure)">
                         <i class="el-icon-zoom-in"></i>
                   </span>

                   <span  class="el-upload-list__item-delete"
                          @click="deleteAnswerImg(enclosure)">
                     <i class="el-icon-delete"></i>
                   </span>
               </span>
              </li>
              <el-dialog :visible.sync="dialogAnswerImgVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </ul>
          </template>

          <template v-if="!isCommit">
            <el-upload
              :action="uploadAction"
              :before-upload="beforeUploadAnswerImg"
              :on-success="uploadAnswerImgSuccess"
              list-type="picture-card"
              :show-file-list="false">
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">答案附件上传(只能上传jpg/png文件，且不超过1M)</div>
            </el-upload>
          </template>
        </div>
      </div>

      <div class="subbtnbox">
        <el-button
          type="danger"
          v-show="!isCommit"
          class="btn"
          round
          @click="commitQuestion">{{commitButtonText}}
        </el-button>
      </div>
    </div>
</template>

<script>
    export default {
      name: 'question-info',
      props: {
        // 试题列表
        data: {
          type: Array,
          default () {
            return []
          }
        },
        // 答案列表
        questionAnswerList: {
          type: Array,
          default () {
            return []
          }
        },

        showNumberTitle: {
          type: Boolean,
          default: true
        },

        examType: { // 默认模式考试
          type: Number,
          default: 1
        },

        courseId: {
          type: Number,
          required: false,
          default: 0
        },

        modeQuestionType: {
          type: Number,
          default: 0
        },

        commitButtonText: {
          type: String,
          default: '提 交'
        },

        needAnswerQuestionCount: {
          type: Number,
          default: 0
        },

        isCommit: {
          type: Boolean,
          default: false
        },

        isPaperQuestion: {
          type: Boolean,
          default: false
        }
      },

      watch: {
        data (val) {
          let that = this
          that.questionInfoList = val
          that.sumSource = 0
          that.questionInfoList.forEach(item => {
            if (item.source) {
              that.sumSource += item.source
            }
          })

          if (that.questionInfoList.length > 0) {
            that.questionTotal = that.questionInfoList.length
            that.currentQuestion = that.questionInfoList[0]
            that.parserCurrentQuestion(that.currentQuestion)
          }
        },



        modeId (val) {
          this.params.courseId = val
        },

        questionAnswerList (val) {
          this.questionAnswerDataList = val
        },

        examType (val) {
          this.currentExamType = val
        },

        isCommit (val) {
          this.commitFlag = val
        },

        isPaperQuestion (val) {
          this.paperFlag = val
        },

        needAnswerQuestionCount (val) {
          this.needAnswerQuestionTotal = val
        },
      },

      data () {
        return {
          openAnswerFlag: false,
          sumSource: 0,
          dialogImageUrl: '',
          fileUrl: this.$store.state.fileHost,
          dialogAnswerImgVisible: false,
          uploadAction: this.$httpApi.httpUrl('/upload/2'),
          needAnswerQuestionTotal: 0, // 需要在线作答题数量
          questionInfoList: [], // 试题列表
          currentQuestion: {}, // 当前试题
          currentQuestionPage: 0, // 试题答案列表
          questionAnswerDataList: [],
          questionTotal: 0,
          commitFlag: false,
          paperFlag: false,
          currentExamType: 1,
          params: {
            courseId: ''
          }
        }
      },

      mounted () {
        let that = this
        that.questionInfoList = that.data
        that.sumSource = 0
        that.questionInfoList.forEach(item => {
          if (item.source) {
            that.sumSource += item.source
          }
        })

        if (that.questionInfoList.length > 0) {
          that.questionTotal = that.questionInfoList.length
          that.currentQuestion = that.questionInfoList[0]
        }
        that.params.courseId = that.courseId
        that.commitFlag = that.isCommit
        that.paperFlag = that.isPaperQuestion
        that.questionAnswerDataList = that.questionAnswerList
        that.needAnswerQuestionTotal = that.needAnswerQuestionCount
      },


      methods: {

        // 上一题
        lastQuestion () {
          this.currentQuestionPage--
          this.currentQuestion = this.questionInfoList[this.currentQuestionPage]
          this.parserCurrentQuestion(this.currentQuestion)
          let questionAnswer = this.questionAnswerDataList[this.currentQuestionPage]
          questionAnswer.userInfoAnswer = this.currentQuestion.userInfoAnswer
          questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
        },

        // 答题卡切换试题
        selectQuestion (index) {
          this.currentQuestionPage = index - 1
          this.currentQuestion = this.questionInfoList[index - 1]
          this.parserCurrentQuestion(this.currentQuestion)
          let questionAnswer = this.questionAnswerDataList[index - 1]
          questionAnswer.userInfoAnswer = this.currentQuestion.userInfoAnswer
          questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
          this.openAnswerFlag = false
        },

        parserCurrentQuestion (item) {
          if (item.question_type != 3 && item.question_type != 4 && item.question_type != 6) {
            if (!item.correct_status) {
              item.correct_status = 2
            }
          }
        },

        // 下一题
        nextQuestion () {
          this.currentQuestionPage++
          this.currentQuestion = this.questionInfoList[this.currentQuestionPage]
          this.parserCurrentQuestion(this.currentQuestion)
          let questionAnswer = this.questionAnswerDataList[this.currentQuestionPage]
          questionAnswer.userInfoAnswer = this.currentQuestion.userInfoAnswer
          questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
        },

        getMoreAnswer (val) {
          let questionAnswer = this.questionAnswerDataList[this.currentQuestionPage]
          questionAnswer.userInfoAnswer = val
          questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
        },

        getUserAnswer (val) {
          this.currentQuestion.userInfoAnswer = val
          this.setUserAnswer()
        },

        setUserAnswer () {
          let questionAnswer = this.questionAnswerDataList[this.currentQuestionPage]
          questionAnswer.userInfoAnswer = this.currentQuestion.userInfoAnswer
          questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
        },

        openWritingBoard () {
         // location.href = this.$store.state.host + '/static/writingBoard/writingBoard.html'
          window.open(this.$store.state.host + '/static/writingBoard/writingBoard.html')
        },

        lookAnswerImg (url) {
          this.dialogAnswerImgVisible = true
          this.dialogImageUrl = url
        },

        deleteAnswerImg (url) {
          let that = this
          let questionAnswer = that.questionAnswerDataList[that.currentQuestionPage]
          that.$confirm('确定移除该图片吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let index = questionAnswer.answerEnclosure.indexOf(url)
            questionAnswer.answerEnclosure.splice(index, 1)
            that.currentQuestion.enclosure.splice(index, 1)
          })
        },

       // 提交
        commitQuestion () {
          let that = this
          let noAnswerCount = 0
          // 未答试题数量
          that.questionAnswerDataList.forEach(function (item) {
            if (item.questionType === 3 || item.questionType === 4 || item.questionType === 6) {
               if (!item.userInfoAnswer) {
                 noAnswerCount++
               }
            } else {
              if (item.answerEnclosure.length === 0) {
                noAnswerCount++
              }
            }
          })
          let message = "确定提交吗?"
          if (noAnswerCount > 0) {
            message = '您还有' + noAnswerCount + '题尚未做答, 确定提交吗?'
          }
          that.$confirm(message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (that.paperFlag) {
              that.$emit('afterCommit', that.questionAnswerDataList)
            } else {
              let params = {
                userInfoAnswerList: that.questionAnswerDataList,
             //   modeQuestionType: that.modeQuestionType, // 课前或者课后试题
                courseId: that.courseId
              }
              that.axios.post(that.$httpApi.httpUrl('/student/course/commitQuestion'), params)
                .then(function (response) {
                  if (response.data.code === 1) {
                    that.currentQuestionPage = 0
                    that.$emit('afterCommit')
                    that.$message({
                      type: 'success',
                      message: response.data.message
                    })
                  } else {
                    that.$message({
                      type: 'error',
                      message: response.data.message
                    })
                  }
                })
            }
          }).catch(() => {
            that.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        },

        beforeUploadAnswerImg (file) {
          let isImage = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif');
          let isLimit = file.size / 1024 / 1024 < 1;

          if (!isImage) {
            this.$message.error('上传图片只能是 JPG/PNG 格式!');
          }
          if (!isLimit) {
            this.$message.error('上传图片大小不能超过 1MB!');
          }
          return isImage && isLimit;
        },

        uploadAnswerImgSuccess (res, file) {
          let questionAnswer = this.questionAnswerDataList[this.currentQuestionPage]
          if (res.code === 1) {
            this.currentQuestion.enclosure.push(res.url)
            questionAnswer.answerEnclosure.push(res.url)
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        }
      },

      filters: {
        parserAnswer (val) {
          if (val instanceof Array) {
            let value = ''
            for (let item in val) {
              value += val[item] + ","
            }
            return value.substr(0, value.length - 1)
          }
          return  val
        }
      }
    }
</script>

<style lang="scss">
  .testinfo p {
    display: inline;
  }

  /*.el-upload--picture-card {*/
  /*  width: 100px !important;*/
  /*  height: 90px !important;*/
  /*  line-height: 100px !important;*/
  /*  vertical-align: top;*/
  /*}*/
  .tops{
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    background-color: #FAD303;
    box-shadow: 3px 2px 0 0 rgba(250, 213, 3, 0.445);
  }

  .el-pagination {
     margin-top: 15px;
     text-align: center;
  }

  .title3 .count {
    position: relative;
    overflow: overlay;
    display: inline-block;
    font-weight: bolder;
    left: 86px;
    color: red;
    font-size: 45px;
  }
  .title3 .mark {
    width: 205px;
    top: 85px;
    left: 57%;
    height: 64px;
    position: absolute;
  }
  .el-radio-button__inner, .el-radio-group {
    padding-top: 20px !important;
    display: block !important;
  }

  .testinfo{
    padding-left: 30px;
    padding-top: 22px;
  }
  .title3{width: 100%;height: 30px;text-align: center;}

  .subbtnbox{width: 100%;text-align: center;padding:20px;
    .btn{
      width: 100px;
      background-color: red;
    }
  }
  .testbox{display: inline-block; margin-top: 20px}

  .btnbox{
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    padding-left: 100px;
    margin-top: 30px;
    padding-right: 100px;
  }
  .play{display: inline-block;height: 30px;line-height: 30px;padding-left:10px;color: red;cursor: pointer;
    .cp{
      font-size: 20px;
      vertical-align: middle;
    }
  }
</style>
